<template>
	<view class="loadEdit">
		<!-- 顶部标签 -->
		<view class="tab">
			<view :class="tabActive==1?'tab_i tab_i_active':'tab_i'" @click="clickTab(1)">运单信息</view>
			<view :class="tabActive==2?'tab_i tab_i_active':'tab_i'" @click="clickTab(2)">安全检查</view>
			<view :class="tabActive==3?'tab_i tab_i_active':'tab_i'" @click="clickTab(3)">装货信息</view>
		</view>
		<template v-if="this.msgForm">
			<!-- 内容1 -->
			<view class="cont" v-show="tabActive==1">
				<view class="cont_item">
					<view class="title">装货企业信息</view>
					<view class="cont_item_row">
						<view class="row_l">装货企业</view>
						<view class="row_r">{{msgForm.loadCorpName}}</view>
					</view>
					<view class="cont_item_row">
						<view class="row_l">所在行政区划</view>
						<view class="row_r">{{getSelectPath(msgForm.loadZipCode)}}</view>
					</view>
				</view>
				<view class="cont_item">
					<view class="title">承运信息</view>
					<view class="cont_item_row">
						<view class="row_l">承运企业</view>
						<view class="row_r">{{msgForm.carriageName}}</view>
					</view>
					<view class="cont_item_row">
						<view class="row_l">承运车辆</view>
						<view class="row_r">{{msgForm.vehCode || '-'}}/{{msgForm.trailerVehCode || '-'}}</view>
					</view>
					<view class="cont_item_row">
						<view class="row_l">驾驶员</view>
						<view class="row_r">{{msgForm.driverName}}</view>
					</view>
					<view class="cont_item_row">
						<view class="row_l">押运员</view>
						<view class="row_r">{{msgForm.escortName}}</view>
					</view>
				</view>
				<view class="cont_btn">
					<view @click="clickTab(2)">下一步</view>
				</view>
			</view>
			<!-- 内容2 安全检查 -->
			<view class="cont" v-show="tabActive==2">
				<view class="cont_item">
					<view class="title">安全检查项</view>
					<view class="cont_item_two">
						<view class="tow_text">1.车辆是否具有有效行驶证和营运证。</view>
						<view class="two_radio">
							<u-radio-group v-model="msgForm.checkOne" :disabled="changeType=='0'">
								<u-radio activeColor="#007AFF" name="Y" label="符合"></u-radio>
								<u-radio activeColor="#007AFF" name="N" label="不符合"></u-radio>
							</u-radio-group>
						</view>
					</view>
					<view class="cont_item_two">
						<view class="tow_text">2.驾押人员是否具有有效从业资格证。</view>
						<view class="two_radio">
							<u-radio-group v-model="msgForm.checkTwo" :disabled="changeType=='0'">
								<u-radio activeColor="#007AFF" name="Y" label="符合"></u-radio>
								<u-radio activeColor="#007AFF" name="N" label="不符合"></u-radio>
							</u-radio-group>
						</view>
					</view>
					<view class="cont_item_two">
						<view class="tow_text">3.运输车辆、罐式车辆罐体、可移动罐柜、罐箱是否在检验合格有效期内。</view>
						<view class="two_radio">
							<u-radio-group v-model="msgForm.checkThree" :disabled="changeType=='0'">
								<u-radio activeColor="#007AFF" name="Y" label="符合"></u-radio>
								<u-radio activeColor="#007AFF" name="N" label="不符合"></u-radio>
							</u-radio-group>
						</view>
					</view>
					<view class="cont_item_two">
						<view class="tow_text">4.充装货物是否与运单载明的事项一致。</view>
						<view class="two_radio">
							<u-radio-group v-model="msgForm.checkFour" :disabled="changeType=='0'">
								<u-radio activeColor="#007AFF" name="Y" label="符合"></u-radio>
								<u-radio activeColor="#007AFF" name="N" label="不符合"></u-radio>
							</u-radio-group>
						</view>
					</view>
					<view class="cont_item_two">
						<view class="tow_text">5.充装危险货物是否在罐式车辆的适装介质列表范围内，或者满足可移动罐柜导则、罐箱适用代码的要求。</view>
						<view class="two_radio">
							<u-radio-group v-model="msgForm.checkFive" :disabled="changeType=='0'">
								<u-radio activeColor="#007AFF" name="Y" label="符合"></u-radio>
								<u-radio activeColor="#007AFF" name="N" label="不符合"></u-radio>
							</u-radio-group>
						</view>
					</view>
					<!-- input -->
					<u--form labelPosition="left" :model="msgForm" labelWidth="160rpx" ref="msgForm2">
						<u-form-item label="检查人" required prop="checkUserName">
							<u--input v-model="msgForm.checkUserName" :disabled="changeType=='0'" disabledColor="#fff">
							</u--input>
						</u-form-item>
						<u-form-item label="身份证号" required prop="checkUserIdCard">
							<u--input v-model="msgForm.checkUserIdCard" :disabled="changeType=='0'"
								disabledColor="#fff">
							</u--input>
						</u-form-item>
					</u--form>
				</view>
				<view class="cont_btn">
					<view @click="clickTab(1)">上一步</view>
					<view @click="clickTab(3)">下一步</view>
				</view>
			</view>
			<!-- 内容3 装货信息 -->
			<view class="cont" v-show="tabActive==3">
				<view class="cont_item">
					<view class="title">装货信息</view>
					<u--form labelPosition="left" :model="msgForm" labelWidth="160rpx" ref="msgForm3"
						:disabled="changeType=='0'">
						<u-form-item required label="货物名称" prop="dgsName">
							<u--input v-model="msgForm.dgsName" :disabled="changeType=='0'"
								disabledColor="#fff"></u--input>
						</u-form-item>
						<u-form-item required label="装货重量" prop="loadWeight">
							<u-input v-model="msgForm.loadWeight" :disabled="changeType=='0'" disabledColor="#fff">
								<span slot="suffix">吨</span>
							</u-input>
						</u-form-item>
						<u-form-item required label="装货员" prop="loadUserName">
							<u--input v-model="msgForm.loadUserName" :disabled="changeType=='0'" disabledColor="#fff">
							</u--input>
						</u-form-item>
						<u-form-item required label="身份证号" prop="loadUserIdCard">
							<u--input v-model="msgForm.loadUserIdCard" :disabled="changeType=='0'" disabledColor="#fff">
							</u--input>
						</u-form-item>
						<u-form-item required label="装货地点" prop="loadAddress">
							<u--input v-model="msgForm.loadAddress" :disabled="changeType=='0'" disabledColor="#fff">
							</u--input>
						</u-form-item>
					</u--form>
				</view>
				<view class="cont_btn">
					<view @click="clickTab(2)">上一步</view>
					<view @click="goBack" v-if="changeType=='0'">返回</view>
					<view @click="changeSave" v-if="changeType=='1'">保存</view>
					<!-- 填报 -->
					<view @click="fillSave" v-if="changeType=='2'">保存</view>
				</view>
			</view>
		</template>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getSelectPath
	} from '@/common/util.js';
	export default {
		data() {
			return {
				msgForm: null,
				// 当前标签
				tabActive: 1,
				changeType: null,

				toastData: {}
			};
		},
		onLoad(option) {
			// 获取请求数据
			// if (option.loadRow) {

			// }
		},
		mounted() {
			let loadRow = this.$store.state.loadFillData
			console.log(loadRow, 'loadRow----------');
			this.changeType = loadRow.changeType
			//判断查看/修改/填报
			if (loadRow.changeType == '2') {
				//填报
				this.msgForm = loadRow

			} else {
				//默认查询
				this.getData({
					id: loadRow.id
				})
				// this.getData({
				// 	id: '1544483131658084353'
				// })
			}

		},

		methods: {
			getSelectPath(zipCode) {
				let obj = getSelectPath(zipCode);
				if (obj && obj.text) {
					return obj.text;
				}
				return zipCode;
			},
			clickTab(num) {
				this.tabActive = num
			},
			getData(row) {
				this.$api.getLoadDetail(row).then(res => {
					console.log(res, '装货详情');
					this.msgForm = res.data.data
				})
			},
			//修改
			changeSave() {
				this.$api.setLoadQuery(this.msgForm).then(res => {
					this.$refs.uToast.show({
						...{
							type: res.data.code == '200' ? 'success' : 'error',
							message: res.data.msg
						},
						//回调
						complete: () => {
							if (res.data.code == '200') {
								this.$goBack(1, 1)
							}
						}
					})
				})
			},
			//返回
			goBack() {
				this.$goBack(1, 1)
			},
			//填报
			fillSave() {
				this.$api.setLoadFill(this.msgForm).then(res => {
					console.log(res, '装货填报');
					this.$refs.uToast.show({
						...{
							type: res.data.code == '200' ? 'success' : 'error',
							message: res.data.msg
						},
						//回调
						complete: () => {
							if (res.data.code == '200') {
								this.$goBack(1, 1);
							}
						}
					})
				})
			}
		},
	}
</script>

<style lang='scss' scoped>
	.loadEdit {}

	.tab {
		width: 100%;
		height: 90rpx;
		background-color: #007AFF;
		line-height: 90rpx;
		display: flex;
		justify-content: space-around;

		.tab_i {
			color:#fff;
			font-size: 28rpx;
		}

		.tab_i_active {
			font-weight: 800;
			position: relative;
		}

		.tab_i_active::after {
			position: absolute;
			content: '';
			bottom: 0;
			left: 0;
			width: 100%;
			height: 4rpx;
			background: #fff;
		}
	}

	.cont {
		.cont_item {
			width: calc(100% - 60rpx);
			border-bottom: 2rpx solid #DDDDDD;
			padding: 20rpx 30rpx;

			.title {
				padding: 0 20rpx;
				width: calc(100% - 40rpx);
				position: relative;
				margin: 20rpx 0;
				color: #007AFF;
				font-size: 30rpx;
			}

			.title::before {
				position: absolute;
				content: '';
				width: 4rpx;
				height: 100%;
				background-color: #007AFF;
				top: 0;
				left: 0;
			}

			/* 左右内容结构 */
			.cont_item_row {
				width: 100%;
				display: flex;
				padding: 10rpx 0;
				font-size: 28rpx;

				.row_l {
					width: 210rpx;
				}

				.row_r {
					flex: 1;
				}
			}

			/* 安全检查 单选框 */
			.cont_item_two {
				width: 100%;

				.two_text {
					width: 100%;
					padding: 10rpx 0;
					font-size: 28rpx;
				}

				.two_radio {
					width: calc(100% - 40rpx);
					padding: 10rpx 20rpx;

					::v-deep .u-radio-group {
						display: flex;
						justify-content: space-between;
					}
				}
			}
		}

		.cont_btn {
			width: 100%;
			margin-top: 60rpx;
			display: flex;
			justify-content: space-around;

			view {
				width: 190rpx;
				height: 50rpx;
				background: #007AFF;
				color: #fff;
				border-radius: 30rpx;
				text-align: center;
				line-height: 50rpx;
				font-size: 28rpx;
			}
		}
	}
</style>